<template>
  <div style="width: 250px">
    <div>
      <img v-lazy="item" v-for="item in arr" width="200px" height="200px">
    </div>
  </div>
</template>
<script setup lang="ts">
import {Directive, ref} from 'vue'

let imageList:Record<string, { default:string }> = import.meta.glob("./assets/images/*.*",{eager:true});
console.log(imageList)
let arr = Object.values(imageList).map(v => v.default)
console.log(arr)

let vLazy:Directive<HTMLImageElement,string> = async (el,binding)=>{
  const def = await import('./assets/vue.svg')
  //默认展示vue
  el.src = def.default
  const observer = new IntersectionObserver((entries) => {
    console.log(entries[0])
    if(entries[0].intersectionRatio > 0){
      //为了看到懒加载
      setTimeout(()=>{
        el.src = binding.value
        observer.unobserve(el)
      },2000)
    }

  })
  observer.observe(el)
}
</script>

<style scoped>

</style>
